<template>
  <div class="wb_edit">
    <el-popover
      ref="popover"
      placement="bottom-start"
      width="200"
      trigger="click"
      popper-class="wb_emojis"
      @show="handleShowEmoji">
      <div class="classify_wrap">
        <span
          v-for="item,n in classifyEmoji"
          :class="{classify_item:true, checked: category===n}"
          @click="category=n">
          {{n}}
        </span>
      </div>
      <div v-show="n===category" v-for="item,n in classifyEmoji" class="emoji_panel">
        <span v-for="emoji,n in item" class="emoji_item" :title="emoji.value" @click="handleSelEmoji(emoji.value)">
          <img :src="emoji.icon" alt="">
        </span>
      </div>
    </el-popover>
    <el-input ref="textarea" v-model="content" type="textarea" :rows="3" resize="none"></el-input>
    <div class="toolbars">
      <span class="bar" v-popover:popover><i class="icon icon-biaoqing"></i>表情</span>
      <span class="bar" @click="dialog=true"><i class="icon icon-tupian"></i>图片</span>
      <div v-if="image.url" class="img_box">
        <div class="img_wrap">
          <img :src="image.url" alt="">
          <div class="op">
            <i class="el-icon-edit" @click="dialog=true"></i>
            <i class="el-icon-close" @click="image={}"></i>
          </div>
        </div>
      </div>
    </div>
    <!-- 选择图片 -->
    <el-dialog ref="dialog" title="选择图片" :visible.sync="dialog" @open="SELECT_SOURCE({})" custom-class="dialog_img">
      <dialog-image></dialog-image>
      <div slot="footer">
        <el-button type="primary" @click="handleSelImage">确定</el-button>
        <el-button @click="dialog=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {mapState, mapActions, mapGetters, mapMutations} from 'vuex'
  import dialogImage from '@/components/common/content/dialogImage'
  export default {
    components: {dialogImage},
    props: {
      'showImage': {
        type: Boolean,
        default: true
      }
    },
    data () {
      return {
        appid: this.$route.params.appid,
        content: '',
        category: '默认',
        image: {},
        dialog: false
      }
    },
    mounted () {
      this.init()
    },
    computed: {
      ...mapState('weiboManage', {
        emojis: state => state.emojis
      }),
      ...mapState({
        selected: state => state.sourceManage.selected
      }),
      ...mapGetters('weiboManage', ['classifyEmoji'])
    },
    methods: {
      ...mapActions('weiboManage', ['getEmotions']),
      ...mapMutations(['SELECT_SOURCE']),
      init () {
        this.SELECT_SOURCE({})
        this.getEmotions(this.appid)
      },
      // 获取表情
      handleShowEmoji () {
        if (!this.emojis.length) {
          this.getEmotions(this.appid)
        }
      },
      // 选择表情
      handleSelEmoji (val) {
        const $textarea = this.$refs.textarea.$el.querySelector('textarea')
        const index = $textarea.selectionStart
        this.content = this.content.slice(0, index) + val + this.content.slice(index)
        setTimeout(function () {
          $textarea.setSelectionRange(index + val.length, index + val.length)
          $textarea.focus()
        }, 0)
      },
      // 选择图片
      handleSelImage () {
        this.dialog = false
        this.image = this.selected
      }
    }
  }
</script>
<style lang="scss">
  .wb_edit{
    .toolbars{
      &{font-size:14px;line-height:34px}
      .bar{margin-right:10px;cursor:pointer;}
      .icon{display:inline-block;margin-right:3px;vertical-align:middle;font-size:22px;}
      .icon-biaoqing{margin-top:-2px;color:#ffa405}
      .icon-tupian{margin-top:-2px;color:#84c002}
    }
    .img_box{
      &{position:absolute;margin-left:60px;width:120px;height:120px;border:1px solid #ccc;text-align:center;}
      &:before{content:'';position:absolute;top:-16px;left:12px;border:8px solid transparent;border-bottom-color:#ccc}
      &:after{content:'';position:absolute;top:-15px;left:12px;border:8px solid transparent;border-bottom-color:#fff}
      img{width:100%;height:100%;}
      .img_wrap{position:relative;margin:10px 0 0 10px;width:100px;height:100px;}
      .img_wrap .op{display:none;position:absolute;top:-7px;right:0;}
      .img_wrap:hover .op{display:block;}
      .img_wrap i{padding:5px;font-size:12px;cursor:pointer;background:#666;color:#fff;transform: scale(.7)}
    }
    .dialog_img{width:900px}
  }
  .wb_emojis{
    &{padding: 26px 16px 15px;width: 377px !important;border: 1px solid #ccc;box-shadow: 0 4px 20px 1px rgba(0,0,0,0.2);}
    .classify_item{position:relative;display:inline-block;margin-right:-1px;padding:0 8px;line-height:28px;background:#f2f2f5;cursor:pointer;border:1px solid #d9d9d9;}
    .classify_item.checked:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:#fa7d3c;}
    .emoji_panel{margin-top:10px;display:flex;flex-wrap:wrap;}
    .emoji_item{
      &{margin:0 -1px -1px 0;width:28px;height:28px;line-height:28px;border:1px solid #e8e8e8;text-align:center;cursor:pointer;}
      img{margin-top:3px;}
    }
  }
</style>
